<template>
           <div class="yuantou" :class="$store.state.pifu==true?'whiteSkin':''">
        <div class="wrap">
          <Panel icon="./img/title/5.png" title="预报警信息">
            <!--各区预警处置情况排行图表-->
            <!-- <Bar v-show="pickRank && pickRank.values.length >0 "  name="整改情况" :names="pickRank.names" :values="pickRank.values" :unit="pickRank.unit" /> -->
            <Reminder
              v-show="pickRank && pickRank.values.length >0 "
              :station-id="reqData?reqData.stationId:''"
              :area-code="reqData?reqData.areaCode:''"
              name="整改情况"
              :names="pickRank.names"
              :values="pickRank.values"
            />
            <NoData v-show="!pickRank  || pickRank &&pickRank.values.length === 0" />
          </Panel>
          <Panel icon="./img/title/1.png" title="各区任务执行情况" unit="件">
            <!--各区任务执行情况图表-->
            <Scatter v-show="originRegion.data.length > 0" :data="originRegion.data" />
            <NoData v-show="originRegion.data.length === 0" />
          </Panel>

          <Panel icon="./img/title/3.png" title="源头视频">
            <!--源头视频-->
            <video-player
              :station-id="reqData?reqData.stationId:''"
              :area-code="reqData?reqData.areaCode:''"
            />
          </Panel>
        </div>
        <div class="wrap">
          <!--地图-->
          <JsonMap
            :data="plantDistribute.data"
            :area-code="reqData?reqData.areaCode:''"
            @SelectCompany="SelectCompany"
            @change="getData"
            :searchBar="false"
            :top="160"
          />

          <Mapfooter />
        </div>
        <div class="wrap">
           <Panel icon="./img/title/2.png" title="企业接入情况">
            <!--企业接入情况-->
            <Platform v-show="inventoryContrast.data.length > 0" :data="inventoryContrast.data" />
            <NoData v-show="inventoryContrast.data.length === 0" />
          </Panel>
           <Panel icon="./img/title/6.png" title="人员接入情况" >
            <!--人员接入情况-->
                   <Ranking  :text="['维修', '运输']" :values="[1000,2000]" />
               
            <!-- <NoData v-show="outboundInventory.values.length === 0" /> -->
          </Panel>
          <Panel icon="./img/title/4.png" title="车辆接入情况" >
          <!--车辆接入情况-->
            <Pie class="index-pie" :data="[{value: 220,name: '客运'}, {value: 120, name: '危货' },{value: 110, name: '普货' }
        ]" />
            <!-- <NoData v-show="fertQuantity.values.length === 0" /> -->
          </Panel>
        </div>
      </div>
</template>
<script>
import JsonMap from "@/views/JsonMap";
import Reminder from "@/components/reminder";
import Scatter from "@/components/charts/Scatter";
import NoData from "@/components/NoData";
import VideoPlayer from "@/components/videoplayer";
import Mapfooter from "@/components/mapfooter";
import Pie from "@/components/originPie";
import Platform from "@/components/platform";
import Scroll from "@/components/scroll";
import countTo from "vue-count-to";
import Ranking from "@/components/charts/ranking";
import types from "@/store/constants/types";
import ns from "@/store/constants/ns";
import { mapState } from "vuex";
const nameSpaced = ns.HOME + "/";
export default {
     components: {
    JsonMap,
    NoData,
    Scatter,
    VideoPlayer,
    Reminder,
    Scroll,
     Pie,
     Platform,
     Ranking,
    countTo,
    Mapfooter
  },
  computed: {
    ...mapState(nameSpaced, {
      inventoryContrast: (state) => state.inventoryContrast, //车辆超载
      pickRank: (state) => state.pickRank, //各区预警处置情况
      originRegion: (state) => state.originRegion, //各区任务执行
      fertQuantity: (state) => state.fertQuantity, //各区电子运单上传情况
      outboundInventory: (state) => state.outboundInventory, //运单日均称重重量
      plantDistribute: (state) => state.plantDistribute, //市企业分布情况
    }),
  },
  data() {
    return {
      stationId: "",
      areaCode: "",
      reqData: null,
      InterVal: null,
      region: "", //当前数据所在的区域
      videoBig: false,
      currentNav: 0,
      toggle:true
    };
  },
  mounted() {
    this.InterVal = setInterval(() => {
      let obj = Object.assign({ timer: true }, this.reqData);
      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    }, 20000);
  },
  destroyed() {
    this.InterVal ? clearInterval(this.InterVal) : null;
  },
  methods: {
      toggleMap(){
          this.toggle=!this.toggle
      },
    getData(data) {
      this.reqData = data;
      this.region = data.name;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, data);
    },
    //选择企业
    SelectCompany(obj) {
      this.reqData = obj;
      this.title = `(${obj.name})`;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    },
    //选择企业性质
    selectType(index) {
      this.currentNav = index;
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../style/views/home/home.scss";
.index-pie{
  width:100%;
  height:100%;
}
</style>